<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="./css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.css" />
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 头部 -->
    <iframe name="header_iframe" onload="this.height=this.contentWindow.document.body.scrollHeight" width=100% src="./components/header.html" frameborder=0 scrolling="no"></iframe>
    <!-- 主体 -->
    <div class="mian">
        <div class="mian-center-box">
            <!-- 第一行 -->
            <div class="main-one">
                <!-- 分类 -->
                <div class="main-category">
                    <div>
                        <img src="img/index/bookmark_in_book.png" alt=""><span>图书音响、文具</span>
                    </div>
                    <div>
                        <img src="img/index/Fork.png" alt=""><span>食品、饮料、酒水</span>
                    </div>
                    <div>
                        <img src="img/index/Baby_Carriage.png" alt=""><span>母婴、玩具、童装</span>
                    </div>
                    <div>
                        <img src="img/index/Double_Bed.png" alt=""><span>家居、家庭清洁、纸品</span>
                    </div>
                    <div>
                        <img src="img/index/Adjust.png" alt=""><span>美妆、个人护理</span>
                    </div>
                    <div>
                        <img src="img/index/winking_face.png" alt=""><span>女装、内衣</span>
                    </div>
                    <div>
                        <img src="img/index/bookmark_in_book.png" alt=""><span>女鞋、男鞋、箱包</span>
                    </div>
                    <div>
                        <img src="img/index/basket.png" alt=""><span>男装、运动</span>
                    </div>
                    <div>
                        <img src="img/index/monitor.png" alt=""><span>手机、电脑、平板</span>
                    </div>
                    <div>
                        <img src="img/index/Star.png" alt=""><span>礼品、充值</span>
                    </div>
                </div>
                <!-- 轮播图 -->
                <div id="carouselExampleIndicators" class="carousel slide main-swiper" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img style="height:500px ;" src="img/shopping/云南特产红菇礼盒菌菇野生山珍干货送礼250g精品正宗无添加农产品.jpg" class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item ">
                            <img style="height:500px ;" src="img/shopping/2022年贵州特产野生刺梨农家新鲜野山果天然食用农产品5斤.jpg" class="d-block w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                            <img style="height:500px ;" src="img/shopping/甘肃定西大土豆新鲜农产品高山黄心士豆 农家沙面洋芋蔬菜马铃薯.jpg" class="d-block w-100" alt="...">
                        </div>

                    </div>
                    <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </button>
                </div>
                <!-- 登陆状态 -->
                <div class="main-login-state">
                    <div class="login-text">
                        <img src="./img/image(13).png" alt="">
                        <div>张三同学</div>
                    </div>
                    <div>

                    </div>
                    <!-- 新闻资讯 -->
                    <div class="login-new">
                        <div>
                            <div>新闻资讯</div>
                            <div>
                                <font color="#838383">更多></font>
                            </div>
                        </div>
                        <div>
                            <div>[特惠]元旦狂欢来啦</div>
                            <div>[特惠]元旦狂欢来啦</div>
                            <div>[特惠]元旦狂欢来啦</div>
                            <div>[特惠]元旦狂欢来啦</div>
                            <div>[特惠]元旦狂欢来啦</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 第二行 -->
            <div class="main-two">
                <!-- 第一个商品 -->
                <!-- <div class="main-base-shop">
                    <img src="./img/image(16).png" alt="">
                </div> -->
                <!-- 多个商品 -->
                <div style="display:flex;width: 100%;padding: 25px 20px;">
                    <div class="main-title">热门商品</div>
                    <div class="main-shops">
                        <div>
                            <div><img class="hot-img " src="img/shopping/云南良道有机芹菜新鲜带叶西芹水农产品基地应季榨汁直销4.5斤.jpg"></div>
                            <div>
                                <p class="overflow"> 云南良道有机芹菜新鲜带叶西芹水农产品基地应季榨汁直销4.5斤</p>
                            </div>
                        </div>
                        <div>
                            <div><img class="hot-img " src="img/shopping/海南特产儋州大红鱼干整条海产干货咸鱼海鱼干农产品食用海鲜礼盒.jpg"></div>
                            <div>
                                <p class="overflow">海南特产儋州大红鱼干整条海产干货咸鱼海鱼干农产品食用海鲜礼盒</p>
                            </div>
                        </div>
                        <div>
                            <div><img class="hot-img " src="img/shopping/广西特产七彩椒新鲜大果现摘小辣椒五彩灯笼椒农产品小米椒5斤装.jpg"></div>
                            <div>
                                <p class="overflow">广西特产七彩椒新鲜大果现摘小辣椒五彩灯笼椒农产品小米椒5斤装</p>
                            </div>
                        </div>
                        <div>
                            <div><img class="hot-img " src="img/shopping/云南小土豆新鲜9斤马铃薯农产品蔬菜红皮洋芋批发迷你黄心土豆10.jpg"></div>
                            <div>
                                <p class="overflow">云南小土豆新鲜9斤马铃薯农产品蔬菜红皮洋芋批发迷你黄心土豆10</p>
                            </div>

                        </div>
                        <div>
                            <div><img class="hot-img " src="img/shopping/甘肃新鲜西红柿番茄自然熟沙瓤食用农产品洋柿子普罗旺斯产地包邮.jpg"></div>
                            <div>
                                <p class="overflow">甘肃新鲜西红柿番茄自然熟沙瓤食用农产品洋柿子普罗旺斯产地包邮</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 第三行 -->
            <div class="main-title2">商品推荐</div>
            <div class="main-three">
                <div class="mian-shop-item">
                    <!-- 商品图片 -->
                    <a href="./ProductDetail.html">
                        <img style="width: 241px;height:238px" src="img/shopping/2022年贵州特产野生刺梨农家新鲜野山果天然食用农产品5斤.jpg" alt="">
                    </a>
                    <!-- 商品文字 -->
                    <div class="mian-shop-text">
                        <div>
                            <font size="3">
                                <b>
                                    <div class="shop-title-length">2022年贵州特产野生刺梨农家新鲜野山果天然食用农产品5斤</div>
                                </b>
                            </font>
                        </div>
                        <div>
                            <font color="#868686">
                                <div class="shop-describe-length">2022年贵州特产野生刺梨农家新鲜野山果天然食用农产品5斤</div>
                            </font>
                        </div>
                        <div>
                            <font color="#EF500C" size="3">
                                <b>￥89.0</b>
                            </font>
                        </div>
                    </div>
                </div>
                <div class="mian-shop-item">
                    <!-- 商品图片 -->
                    <img style="width: 241px;height:238px" src="img/shopping/甘肃定西大土豆新鲜农产品高山黄心士豆 农家沙面洋芋蔬菜马铃薯.jpg" alt="">
                    <!-- 商品文字 -->
                    <div class="mian-shop-text">
                        <div>
                            <font size="3">
                                <b>
                                    <div class="shop-title-length">甘肃定西大土豆新鲜农产品高山黄心士豆 农家沙面洋芋蔬菜马铃薯</div>
                                </b>
                            </font>
                        </div>
                        <div>
                            <font color="#868686">
                                <div class="shop-describe-length">甘肃定西大土豆新鲜农产品高山黄心士豆 农家沙面洋芋蔬菜马铃薯</div>
                            </font>
                        </div>
                        <div>
                            <font color="#EF500C" size="3">
                                <b>￥89.0</b>
                            </font>
                        </div>
                    </div>
                </div>
                <div class="mian-shop-item">
                    <!-- 商品图片 -->
                    <img style="width: 241px;height:238px" src="img/shopping/釜山88圣女果即食酸甜玲珑小番茄孕妇新鲜农产品水果多汁小柿子.jpg" alt="">
                    <!-- 商品文字 -->
                    <div class="mian-shop-text">
                        <div>
                            <font size="3">
                                <b>
                                    <div class="shop-title-length">釜山88圣女果即食酸甜玲珑小番茄孕妇新鲜农产品水果多汁小柿子</div>
                                </b>
                            </font>
                        </div>
                        <div>
                            <font color="#868686">
                                <div class="shop-describe-length">釜山88圣女果即食酸甜玲珑小番茄孕妇新鲜农产品水果多汁小柿子</div>
                            </font>
                        </div>
                        <div>
                            <font color="#EF500C" size="3">
                                <b>￥89.0</b>
                            </font>
                        </div>
                    </div>
                </div>
                <div class="mian-shop-item">
                    <!-- 商品图片 -->
                    <img style="width: 241px;height:238px" src="img/shopping/河岸美农现挖5斤装甜菜根紫菜头红甜菜 红菜头甜菜头蔬菜农产品.jpg" alt="">
                    <!-- 商品文字 -->
                    <div class="mian-shop-text">
                        <div>
                            <font size="3">
                                <b>
                                    <div class="shop-title-length">河岸美农现挖5斤装甜菜根紫菜头红甜菜 红菜头甜菜头蔬菜农产品</div>
                                </b>
                            </font>
                        </div>
                        <div>
                            <font color="#868686">
                                <div class="shop-describe-length">河岸美农现挖5斤装甜菜根紫菜头红甜菜 红菜头甜菜头蔬菜农产品</div>
                            </font>
                        </div>
                        <div>
                            <font color="#EF500C" size="3">
                                <b>￥89.0</b>
                            </font>
                        </div>
                    </div>
                </div>
                <div class="mian-shop-item">
                    <!-- 商品图片 -->
                    <img style="width: 241px;height:238px" src="img/shopping/猴脑菇核桃菌玛瑙菌干货食材500g海参菇黑松菌玛咖菌食用农产品.jpg" alt="">
                    <!-- 商品文字 -->
                    <div class="mian-shop-text">
                        <div>
                            <font size="3">
                                <b>
                                    <div class="shop-title-length">猴脑菇核桃菌玛瑙菌干货食材500g海参菇黑松菌玛咖菌食用农产品</div>
                                </b>
                            </font>
                        </div>
                        <div>
                            <font color="#868686">
                                <div class="shop-describe-length">猴脑菇核桃菌玛瑙菌干货食材500g海参菇黑松菌玛咖菌食用农产品</div>
                            </font>
                        </div>
                        <div>
                            <font color="#EF500C" size="3">
                                <b>￥89.0</b>
                            </font>
                        </div>
                    </div>
                </div>
                <div class="mian-shop-item">
                    <!-- 商品图片 -->
                    <img style="width: 241px;height:238px" src="img/shopping/羊肚菌干货250g云南特产野生菌食用菌菇煲汤食材新货羊肚蘑农产品.jpg" alt="">
                    <!-- 商品文字 -->
                    <div class="mian-shop-text">
                        <div>
                            <font size="3">
                                <b>
                                    <div class="shop-title-length">羊肚菌干货250g云南特产野生菌食用菌菇煲汤食材新货羊肚蘑农产品</div>
                                </b>
                            </font>
                        </div>
                        <div>
                            <font color="#868686">
                                <div class="shop-describe-length">羊肚菌干货250g云南特产野生菌食用菌菇煲汤食材新货羊肚蘑农产品</div>
                            </font>
                        </div>
                        <div>
                            <font color="#EF500C" size="3">
                                <b>￥89.0</b>
                            </font>
                        </div>
                    </div>
                </div>
                <div class="mian-shop-item">
                    <!-- 商品图片 -->
                    <img style="width: 241px;height:238px" src="img/shopping/云南特产红菇礼盒菌菇野生山珍干货送礼250g精品正宗无添加农产品.jpg" alt="">
                    <!-- 商品文字 -->
                    <div class="mian-shop-text">
                        <div>
                            <font size="3">
                                <b>
                                    <div class="shop-title-length">云南特产红菇礼盒菌菇野生山珍干货送礼250g精品正宗无添加农产品</div>
                                </b>
                            </font>
                        </div>
                        <div>
                            <font color="#868686">
                                <div class="shop-describe-length">云南特产红菇礼盒菌菇野生山珍干货送礼250g精品正宗无添加农产品</div>
                            </font>
                        </div>
                        <div>
                            <font color="#EF500C" size="3">
                                <b>￥89.0</b>
                            </font>
                        </div>
                    </div>
                </div>
                <div class="mian-shop-item">
                    <!-- 商品图片 -->
                    <img style="width: 241px;height:238px" src="img/shopping/正宗东北油豆角一点红豆角新鲜蔬菜九月青面豆角开锅烂食用农产品.jpg" alt="">
                    <!-- 商品文字 -->
                    <div class="mian-shop-text">
                        <div>
                            <font size="3">
                                <b>
                                    <div class="shop-title-length">正宗东北油豆角一点红豆角新鲜蔬菜九月青面豆角开锅烂食用农产品</div>
                                </b>
                            </font>
                        </div>
                        <div>
                            <font color="#868686">
                                <div class="shop-describe-length">正宗东北油豆角一点红豆角新鲜蔬菜九月青面豆角开锅烂食用农产品</div>
                            </font>
                        </div>
                        <div>
                            <font color="#EF500C" size="3">
                                <b>￥89.0</b>
                            </font>
                        </div>
                    </div>
                </div>
                <div class="mian-shop-item">
                    <!-- 商品图片 -->
                    <img style="width: 241px;height:238px" src="img/shopping/正宗沙地紫薯10斤新鲜现挖地瓜香薯番薯农家自种批发包邮农产品10.jpg" alt="">
                    <!-- 商品文字 -->
                    <div class="mian-shop-text">
                        <div>
                            <font size="3">
                                <b>
                                    <div class="shop-title-length">正宗沙地紫薯10斤新鲜现挖地瓜香薯番薯农家自种批发包邮农产品10</div>
                                </b>
                            </font>
                        </div>
                        <div>
                            <font color="#868686">
                                <div class="shop-describe-length">正宗沙地紫薯10斤新鲜现挖地瓜香薯番薯农家自种批发包邮农产品10</div>
                            </font>
                        </div>
                        <div>
                            <font color="#EF500C" size="3">
                                <b>￥89.0</b>
                            </font>
                        </div>
                    </div>
                </div>
                <div class="mian-shop-item">
                    <!-- 商品图片 -->
                    <img style="width: 241px;height:238px" src="img/shopping/正宗浙江绍兴梅干菜干货特级农家免洗无沙霉菜干菜扣肉农产品500g.jpg" alt="">
                    <!-- 商品文字 -->
                    <div class="mian-shop-text">
                        <div>
                            <font size="3">
                                <b>
                                    <div class="shop-title-length">正宗浙江绍兴梅干菜干货特级农家免洗无沙霉菜干菜扣肉农产品500g</div>
                                </b>
                            </font>
                        </div>
                        <div>
                            <font color="#868686">
                                <div class="shop-describe-length">正宗浙江绍兴梅干菜干货特级农家免洗无沙霉菜干菜扣肉农产品500g</div>
                            </font>
                        </div>
                        <div>
                            <font color="#EF500C" size="3">
                                <b>￥89.0</b>
                            </font>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 加载更多 -->
            <div style="margin: 50px 0;">
                <center>
                    <h4>
                        <font color="#C08166">
                            加载更多
                        </font>
                    </h4>
                </center>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <iframe name="footer_iframe" onload="this.height=this.contentWindow.document.body.scrollHeight" width=100% src="./components/footer.html" frameborder=0 scrolling="no"></iframe>
    <!-- 长度截取 -->
    <script type="text/javascript">
        var new_playerName = "";
        $(".shop-title-length").each(function() {
            let count = 13 //长度截取
            var s1 = jQuery(this).text().length;
            console.log(s1);
            if (s1 > count) {
                new_playerName = jQuery(this).text().substring(0, count);
                new_playerName += "..."
                jQuery(this).html(new_playerName);
            } else {
                new_playerName = jQuery(this).text();
            }
            return new_playerName;
        })
        $(".shop-describe-length").each(function() {
            let count = 13 //长度截取
            var s1 = jQuery(this).text().length;
            console.log(s1);
            if (s1 > count) {
                new_playerName = jQuery(this).text().substring(0, count);
                new_playerName += "..."
                jQuery(this).html(new_playerName);
            } else {
                new_playerName = jQuery(this).text();
            }
            return new_playerName;
        })
    </script>
</body>

</html>